<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
const previewContent = ref<string>('')

const previewDialog = (remark: string) => {
  previewContent.value = remark
  visible.value = true
}

// 暴露方法给父组件
defineExpose({ previewDialog })
</script>

<template>
  <el-dialog
      title="预览"
      v-model="visible"
      :close-on-click-modal="false"
      draggable
  >
    <div class="preview-content" v-html="previewContent"></div>
    <template #footer>
      <el-button size="small" type="primary" @click="visible = false">
        返回
      </el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.preview-content {
  /* 统一恢复 h1~h6 的浏览器默认外观 */
  :deep(h1) {
    font-size: 2em;
    font-weight: bold;
    margin: 0.67em 0;
  }

  :deep(h2) {
    font-size: 1.5em;
    font-weight: bold;
    margin: 0.75em 0;
  }

  :deep(h3) {
    font-size: 1.17em;
    font-weight: bold;
    margin: 0.83em 0;
  }

  :deep(h4) {
    font-size: 1em;
    font-weight: bold;
    margin: 1.12em 0;
  }

  :deep(h5) {
    font-size: 0.83em;
    font-weight: bold;
    margin: 1.5em 0;
  }

  :deep(h6) {
    font-size: 0.67em;
    font-weight: bold;
    margin: 1.67em 0;
  }

  /* 防止图片溢出 */
  :deep(img) {
    max-width: 100%;
    height: auto;
  }
}
</style>